@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content{
            height: 72vw;
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <div class="form-container-header">
            <el-form :inline="true" :model="tables.search" size="small">
                <el-form-item>
                    <el-input v-model="tables.search.keyword" placeholder="按名称关键词搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="tables.search.status" placeholder="-- 按状态搜索 --" clearable>
                        <el-option label="状态(全部)" value=""></el-option>
                        <el-option key="1" label="启用" value="1"></el-option>
                        <el-option key="2" label="禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                    </el-button>
                    <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
                </el-form-item>

                <el-row class="options-right">
                    <el-button size="small" type="primary" v-if="permissions.insert" @click="tablesRowsInsert">
                        <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                    </el-button>
                </el-row>

            </el-form>
        </div>
        <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
            <el-table
                    :data="tables.data"
                    border
                    :stripe = "true"
                    @selection-change="tablesSelectChange"
                    @sort-change="tablesPaginationSortChange"
                    @cell-click="tablesCellMoveEvent"
                    tooltip-effect="dark"
                    ref="formContainerTables"
                    row-key="id">
                <el-table-column prop="name" label="用户名" align="center" ></el-table-column>
                <el-table-column prop="account" label="登录账号" align="center" ></el-table-column>
                <el-table-column prop="role_id" label="所属角色" align="center" >
                    <template slot-scope="scope">@{{parentsRoleItems[scope.row.role_id]?parentsRoleItems[scope.row.role_id].label:'---'}}</template>
                </el-table-column>
                <el-table-column prop="status" label="角色状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger" effect="plain">禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success" effect="plain">启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="login_num" label="登录次数" align="center" width="150" sortable></el-table-column>
                <el-table-column prop="login_at" label="最近登录时间" align="center" :formatter="formatTableDate" width="150" sortable></el-table-column>
                <el-table-column prop="updated_at" label="更新时间" align="center" :formatter="formatTableDate" width="150" sortable></el-table-column>
                <el-table-column prop="created_at" label="创建时间" align="center" :formatter="formatTableDate" width="150" sortable></el-table-column>

                <el-table-column prop="options" label="操作" align="left" width="160" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)" v-if="permissions.update">
                            <i :class="permissions.update.icon"></i> @{{permissions.update.name}}
                        </el-button>
                        {{-- 更多操作 --}}
                        <el-dropdown size="small" style="margin-left: 10px">
                            <el-button size="mini" primary type="text"> <i class="fa fa-reorder "></i> 更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="permissions.status">
                                    <el-button size="mini" warning type="text" @click="tablesRowsStatus(scope.row,{id:scope.row.id})" v-if="permissions.status" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.status.icon"></i> @{{tables.status.maps[scope.row.status]}}
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.remove">
                                    <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)" v-if="permissions.remove" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.remove.icon"></i> @{{permissions.remove.name}}
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        {{-- 更多操作 End. --}}
                    </template>
                </el-table-column>
            </el-table>
            {!! \App\Master\Framework\View\AdminUi::pagination() !!}
        </div>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")

    @include('admin.framework.manage.users.forms')

@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config,$Layouts,$Tables,$DrawerForms],
            data: {
                component:{status:false},
                config:{permissions:true},
                tables:{
                    remove:{url:'framework/manage/users/remove',msg:'确认删除当前菜单吗？',field:'id'},
                    status:{url:'framework/manage/users/status',field:'status'},
                    url:'framework/manage/users', search:{}, pagination:{layout:''},
                    prop: 'id', orderBy: 'asc'
                },
                create:{
                    drawer: false, loading: false, action:'#',
                    model:{group_id: 0, name: '', description: '', status: true, menu_ids: []},
                    rules: {
                        role_id: [
                            { required: true, message: '请选择所属角色', trigger: 'blur'}
                        ],
                        name: [
                            { required: true, message: '请填写用户名', trigger: 'blur'}
                        ],
                        account: [
                            { required: true, message: '请填写登录账号', trigger: 'blur'}
                        ]
                    }
                },
                updatePasswordStatus:false,
                parentsRoleItems: [],
            },
            methods:{
                tablesRowsInsert() {
                    var that = this;
                    that.updatePasswordStatus = true
                    that.create.action = 'framework/manage/users/insert';
                    that.create.model = {role_id:'',name:'',account:'',status:true,password:''};
                    that.drawerFormsOpens('create');
                },

                tablesRowsUpdate(rows) {
                    var that = this;
                    that.create.action = 'framework/manage/users/update';
                    that.create.model = {
                        id:rows.id,
                        name:rows.name,
                        account:rows.account,
                        is_system:rows.is_system,
                        password:'',
                        role_id:rows.role_id,
                        status:rows.status == '1' ? true : false
                    };
                    that.updatePasswordStatus = false;
                    that.drawerFormsOpens('create');
                },

                tablesResetsEvent() {
                    var that = this;
                    that.tables.search = {keyword: '', status: ''};
                    that.tablesGetTableList();
                },

                getRoleItems() {
                    var that = this;
                    $Request.postJson('framework/common/manage/getRoleItems', {is_key:true}, function (res) {
                        that.parentsRoleItems = res.result;
                    });
                },
            },
            created() {
                this.getRoleItems();
            },
            mounted(){

            }
        })
    </script>
@endpush